//#region 获取dom元素
const tbody = document.querySelector('tbody');
//#endregion

//#region 获取成绩数据 和显示成绩
function getScore() {
  axios.get('/score/list').then((result) => {
    const data = result.data.data;
    console.log(data);
    let html = '';
    // 对象是可以遍历
    for (const key in data) {
      // key =  id
      // console.log(key);//  111481
      // console.log(data[key]); // {name: '崔娟', group: 8, score: Array(5)}
      html += `
      <tr>
        <th scope="row">${key}</th>
        <td>${data[key].name}</td>
        <td class="score">${data[key].score[0]} <input type="text"  ></td>
        <td class="score">${data[key].score[1]} <input type="text"  ></td>
        <td class="score">${data[key].score[2]} <input type="text"  ></td>
        <td class="score">${data[key].score[3]} <input type="text"  ></td>
        <td class="score">${data[key].score[4]} <input type="text"  ></td>
      </tr>
      `;
    }

    tbody.innerHTML = html;
  });
}
getScore();
//#endregion

//#region 给单元格绑定点击事件
tbody.addEventListener('dblclick', function (event) {
  // 目标元素 要是 td标签  同时身上有类名 score
  const td = event.target;
  if (td.tagName === 'TD' && td.className === 'score') {
    const input = td.querySelector('input');
    input.style.display = 'block';// input标签显示出来
    // 文本 居中 css 

    // 设置被显示的输入框 获得焦点
    input.focus();
    input.value = td.innerText;

    // 让输入框的光标 出现文字的最后面   先让光标显示，再往里面设置文本
  }
});
//#endregion
